<template>
	<view class="charts-box">
		<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :canvas2d="true"
			canvasId="PsNmYqrBMzLKUvlzCBmGNwfiReOskSNI" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {share} from '@/utils/share.js';
	onLoad(() => {
		share();
		getServerData();
	});

	const chartData = ref({});

	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 10, 0, 15],
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow"
			}
		}
	});

	function getServerData() {
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				categories: ["七月", "八月", "九月", "十月", "十一月", "十二月"],
				series: [
					{
						name: "参会数",
						data: [20, 30, 15, 40, 25, 35]
					}
				]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	};
</script>

<style scoped lang="scss">
	.charts-box {
		margin-top: 30px;
		width: 100%;
		height: 300px;
	}
</style>